import React, {useState} from "react";

import {Layout,Dropdown,Menu,Avatar } from "antd"
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined
} from '@ant-design/icons';
import {useNavigate} from "react-router-dom";
import {connect} from 'react-redux'
import {ChangeCollapsed} from "../../redux/constant";
import {changeCollapsed} from "../../redux/action/collapsed";

const {Header} = Layout

function TopHeader(props) {
    // console.log(props)
    const navigate = useNavigate()
    // const [collapsed, setCollapsed] = useState(false)
    const changeCollapsed = ()=>{
        // setCollapsed(!collapsed)
        console.log(props.isCollapsed)
        props.changeCollapsed()
    }
    const {role:{roleName}, username} = JSON.parse(localStorage.getItem("token"))
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        roleName
                    ),
                },
                {
                    key: '2',
                    danger: true,
                    label: '退出',
                    onClick:()=>{
                        localStorage.removeItem("token")
                        navigate("/login")
                    }
                },
            ]}
        />
    );

    return (
        <Header
            className="site-layout-background"
            style={{
                padding: '0 16px',
            }}
        >
            {
                props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapsed}/> :
                    <MenuFoldOutlined onClick={changeCollapsed}/>
            }
            <div style={{float:"right"}}>
                <span>欢迎<span style={{color: "#1890ff"}}>{username}</span>回来</span>
                <Dropdown overlay={menu}>
                    <Avatar size="large" icon={<UserOutlined />} />
                </Dropdown>
            </div>
        </Header>
    )
}

/*
 connect(
  // mapStateToProps
  // mapDispatchToProps
 )(被包装的组件)
*/
const mapStateToProps = ({CollapsedReducer:{isCollapsed}})=>{
    // console.log(state)
    return {
        isCollapsed
    }
}

const mapDispatchToProps = {
    changeCollapsed(){
        return {
            type: ChangeCollapsed
            // payload:
        }   //action
    }
}
// export default connect(mapStateToProps, mapDispatchToProps)(TopHeader)
export default connect(
    state => ({
        isCollapsed: state.CollapsedReducer.isCollapsed
    }),
    {changeCollapsed})
(TopHeader)